<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="">
  <div class="top2"></div>
  <!-- 导航栏 -->
  <nav class="fixed nav-top">
    <div class="margin-lr-hidden">
      <div class="flex vcenter">
        <a href="" class="LOGO">A Toolsets</a>
        <div>
          <a href="">主页</a>
          <a href="">工具</a>
          <a href="">介绍</a>
          <img src="" alt="">
        </div>
      </div>
    </div>
  </nav>
  <div class="screen">
    <div class="screen-in">
      <div class="h-1">
        <h1>一个工具集合</h1>
        <p>真一个工具集合</p>
        <div class="btn-box">
          <a href="#NR" class="btn">开始使用</a>
        </div>
      </div>
    </div>
  </div>
  <a id="NR" class="NR"></a>
  <div class="nr">
    <div class="card ">
      <!-- <div class="cards">
        <div class="cards-nr">
          <h3>JSON格式化</h3>
          <p>专业的JSON数据格式化工具，支持语法高亮和格式验证</p>
        </div>
      </div> -->
      <div class="card grid " id="cardContainer"></div>
      <!-- <div class="cards"></div>
      <div class="cards"></div>
      <div class="cards"></div>
      <div class="cards"></div>
      <div class="cards"></div>
      <div class="cards"></div> -->
    </div>
  </div>


  <!-- <div class="cards-tc">
    <div class="x-btn"></div>
    <a href="">JSON格式化</a>
  </div> -->



  <div class="card-container" id="cardContainer"></div>

  <div class="nav-header"></div>


  <button class="close-btn" onclick="hideDetail()">×</button>
  <div class="detail-overlay" onclick="handleOverlayClick(event)">

    <div class="detail-content">
      <!-- 动态内容将插入到这里 -->11111
    </div>
  </div>
  <div class="mh"></div>


  <div class="c"></div>

  <script src="script.js"></script>
  <script src="Data.js"></script>
</body>

</html>